<template>
	<view class="records-page">
		<!-- 顶部年份选择 -->
		<view class="top-area">
			<picker mode="selector" :range="years" :value="selectedYearIndex" @change="onYearChange">
				<view class="year-select">
					<text class="year-text">{{ years[selectedYearIndex] }}</text>
					<text class="chev">▾</text>
				</view>
			</picker>
		</view>

		<!-- 列表 -->
		<scroll-view class="list-wrap" scroll-y :style="{ height: listHeight }">
			<view class="group" v-for="(item, idx) in records" :key="idx">
				<view class="group-title">{{ item.year }}</view>

				<view class="card" @click="openDetail(item)">
					<view class="card-top">
						<text class="device-no">{{ item.deviceNo }}</text>
					</view>

					<view class="card-mid">
						<text class="place">{{ item.place }}</text>
						<text class="dot">·</text>
						<text class="action-text">{{ item.content }}</text>
					</view>

					<view class="card-bottom">
						<text class="time">{{ formatDate(item.time) }}</text>
					</view>
				</view>
			</view>

			<view v-if="records.length === 0" class="empty">
				<text class="empty-text">暂无充值记录</text>
			</view>

			<view style="height: 120rpx;"></view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 示例年份（可根据后端返回动态生成）
				years: this.generateYears(), // 直接生成
				selectedYearIndex: 0, // 先给默认值，后面自动覆盖
				records: [], // 原始扁平记录数组
				viewportHeight: 0
			};
		},
		computed: {
			// 计算列表高度（预留底部空间）
			listHeight() {
				return `${this.viewportHeight - 120}px`;
			},
		},
		mounted() {

			const sys = uni.getSystemInfoSync();
			this.viewportHeight = sys.windowHeight;
			// 填充示例数据，生产环境请替换 fetchRecords() 从后端获取
			this.fetchRecords();
			// // 获取当前年份
			// const currentYear = new Date().getFullYear() + '年';
			// // 在 years 数组中找到对应索引
			// const index = this.years.indexOf(currentYear);
			// // 如果找到了就设为默认下标
			// if (index !== -1) {
			// 	this.selectedYearIndex = index;
			// }
		},
		methods: {
			generateYears() {
				const currentYear = new Date().getFullYear()
				const years = []
				for (let i = 0; i < 10; i++) {
					years.push(`${currentYear - i}年`)
				}
				return years
			},
			// 模拟请求，替换成真实接口调用
			fetchRecords() {
				// 示例数据 —— 字段：deviceNo, place, content, time (ISO or timestamp)
				this.records = [{
						deviceNo: '868088057462851',
						place: '西留营',
						content: '时间租赁充值 -20天',
						time: '2022-07-27T22:22:30'
					},
					{
						deviceNo: '60120331511',
						place: '西留营',
						content: '时间租赁充值100天',
						time: '2022-07-27T22:22:05'
					},
					{
						deviceNo: '868088057462851',
						place: '西留营',
						content: '流量充值 -500升',
						time: '2022-07-27T22:19:12'
					},
					{
						deviceNo: '868088057462851',
						place: '西留营',
						content: '流量充值1000升',
						time: '2022-07-27T21:51:00'
					},
					// 2023 示例
					{
						deviceNo: '123456789012345',
						place: '西留营',
						content: '流量充值200MB',
						time: '2023-05-12T09:18:00'
					},
					// 2024 示例
					{
						deviceNo: '777777777777777',
						place: '西留营',
						content: '时间租赁充值50天',
						time: '2024-03-02T14:12:00'
					}
				];
			},

			// 年份切换
			onYearChange(e) {
				this.selectedYearIndex = +e.detail.value;
			},

			// 点击卡片进入详情（占位）
			openDetail(item) {
				console.log('打开充值详情：', item);
				// uni.navigateTo({ url: `/pages/recharge/detail?id=${item.id}` });
			},

			// 格式化时间显示
			formatDate(t) {
				const d = new Date(t);
				const pad = n => (n < 10 ? '0' + n : n);
				return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.records-page {
		min-height: 100vh;
		background: #f6f7f8;
		padding-bottom: 140rpx;
		box-sizing: border-box;
	}

	/* 顶部年份选择 */
	.top-area {
		padding: 18rpx 18rpx 6rpx;
		background: transparent;
	}

	.year-select {
		display: flex;
		align-items: center;
		gap: 8rpx;
		background: #fff;
		padding: 12rpx 16rpx;
		border-radius: 12rpx;
		width: 160rpx;
		box-shadow: 0 6rpx 18rpx rgba(20, 30, 50, 0.04);
	}

	.year-text {
		font-size: 28rpx;
		color: #333;
	}

	.chev {
		color: #9aa4ad;
		font-size: 20rpx;
	}

	/* 列表容器 */
	.list-wrap {
		padding: 12rpx 14rpx;
	}

	/* 年组标题 */
	.group-title {
		font-size: 28rpx;
		color: #88909a;
		margin: 14rpx 6rpx;
	}

	/* 卡片 */
	.card {
		background: #fff;
		border-radius: 12rpx;
		padding: 18rpx;
		margin-bottom: 12rpx;
		box-shadow: 0 8rpx 20rpx rgba(20, 30, 50, 0.04);
		transition: transform 0.12s ease;
	}

	.card:active {
		transform: translateY(2rpx);
	}

	/* 卡片布局 */
	.card-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.device-no {
		font-size: 30rpx;
		color: #222;
		font-weight: 600;
	}

	/* 中间行 */
	.card-mid {
		display: flex;
		align-items: baseline;
		gap: 10rpx;
		margin-bottom: 12rpx;
	}

	.place {
		font-size: 26rpx;
		color: #666;
	}

	.dot {
		color: #ccc;
		margin: 0 6rpx;
	}

	.action-text {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	/* 底部时间 */
	.card-bottom {
		display: flex;
		justify-content: flex-start;
	}

	.time {
		font-size: 22rpx;
		color: #9aa4ad;
	}

	/* 空状态 */
	.empty {
		padding: 60rpx 0;
		text-align: center;
	}

	.empty-text {
		color: #a6b0b6;
		font-size: 26rpx;
	}

	/* 样式微调：更紧凑的视觉 */
	@media (min-width: 0px) {
		.card {
			padding: 18rpx;
		}

		.device-no {
			font-size: 32rpx;
		}

		.action-text {
			font-size: 28rpx;
		}
	}
</style>